<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.88.1">
  <title>巡游轨迹的个人博客</title>
  <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
  </style>
  <link href="../dist/css/navbar.css" rel="stylesheet">
  <link href="../dist/css/starter-template.css" rel="stylesheet">
  <script src="../dist/js/jquery.min.js"></script>
  <link href="../dist/css/beijing.css" rel="stylesheet">
  <link href="../dist/css/footers.css" rel="stylesheet">
</head>

<body>
  <main>
    <div>
      <!--导航栏-->
      <nav class="navbar navbar-expand-lg navbar-light bg-light rounded fixed-top" aria-label="Eleventh navbar example">
        <div class="container-fluid">
          <img src="../images/TouXiang.jpg" alt="" width="35" height="35" class="rounded-circle me-2">
          <a class="navbar-brand" href="start.html">巡游轨迹的个人博客</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09"
            aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarsExample09">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="download.html"
                  style="color:rgba(0, 163, 228, 0.87) ;">旅行攻略</a>
              </li>
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="personal.html">个人简介</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-bs-toggle="dropdown"
                  aria-expanded="false">更多</a>
                <ul class="dropdown-menu" aria-labelledby="dropdown09">
                  <li><a class="dropdown-item" href="message.html">留言</a></li>
                  <li><a class="dropdown-item" href="Updatelog.html">图片上传</a></li>
                </ul>
              </li>
            </ul>
            <form>
              <input id="textId" class="form-control" type="text" placeholder="请输入..." aria-label="Search">
            </form>
            <div class="text-end">
              &nbsp;&nbsp;<button id="btn" type="button"
                class="btn btn-warning">搜索</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>
        </div>
      </nav>
    </div>
  </main>

  <!--蓝色气泡背景-->
  <div class="kuang">
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
  </div>
  <!--高度填充-->
  <div style="height: 50px;"></div>
  <!--攻略下载-->
  <div id="download">
    <template :key="i" v-for="(item, i) in Strategy">
      <div>
        <h1 style="color:white ;margin:20px;">{{item.inner.name}}</h1>
        <p class="fs-5 col-md-8" style="color:white ;margin:20px;">{{item.inner.brief}}</p>
        <div>
          <div class="mb-5">
            <template v-for="(buttom, i) in item.inner.buttom">
              <a :href="buttom.url" :target="buttom.target" style="color:white;text-decoration: none;margin:20px;"
                class="btn btn-primary btn-lg px-4" @click="shuchu">{{buttom.name}}</a>
            </template>
          </div>
        </div>
      </div>
      <hr>
    </template>
  </div>

  <div class="b-example-divider" style="height: 30px;"></div>
  <!-------------------分割------------------->
  <div class="container" style="height: 30px;">
    <!-------------------页脚------------------->
    <div id="lxfs">
      <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <div class="col-md-4 d-flex align-items-center">
          <a href="personal.html" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
            <img src="../images/jianjie.jpg" width="24" height="24">
          </a>
          <span class="text-muted">&copy; 2022 Company, Inc</span>
        </div>
        <!-------------------弹框样式1------------------->.
        <div background-color="grey">
          <div class="back" v-if="showModal" @click="showModal=false"></div>
          <div class="pop" v-if="showModal"
            style="background:url('../images/footer/wxt.jpg')  no-repeat;background-size: cover;">
          </div>
        </div>
        <!-------------------弹框样式2------------------->.
        <div background-color="grey1">
          <div class="back" v-if="showModalqq" @click="showModalqq=false"></div>
          <div class="pop" v-if="showModalqq"
            style="background:url('../images/footer/qqt.jpg')  no-repeat;background-size: cover;">
          </div>
        </div>
        <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
          <li class="ms-3"><a class="text-muted" href="javascript:void(0)" v-bind="showModal" @click="wx1(index)"><img
                src="../images/footer/weixin.png" width="24" height="24"></a></li>
          <li class="ms-3"><a class="text-muted" href="javascript:void(0)" v-bind="showModalqq" @click="qq1(index)"><img
                src="../images/footer/qq.png" width="24" height="24"></a>
          </li>
          <li class="ms-3"><a class="text-muted" href="#"><img src="../images/footer/top.png" width="24"
                height="24"></a></li>
        </ul>
      </footer>
    </div>
  </div>
  <script src="../dist/js/bootstrap.bundle.min.js"></script>
  <script src="../dist/js/vue3.js"></script>
</body>
<script>
  Vue.createApp({
    data() {
      return {

        Strategy: [
          // 第一个攻略
          {
            'inner': {
              'name': '纳木错-西藏', // 大标题
              'brief': '纳木错，蒙古语称“腾格里诺尔”（或“腾格里海”）；藏语全称为“纳木措普摩”，意为富裕天湖（或天湖、灵湖或神湖）；两种名称都是“天湖”之意。历史文献上记载，此湖像蓝天降到地面，故称“天湖”.',	// 描述
              // 按钮， url改成 "..//download/纳木错.doc为本地文件，改成url是外部链接
              'buttom': [{ 'name': '查看', 'url': '..//download/纳木错.pdf', 'target': '_blank' },
              { 'name': '下载', 'url': '..//download/纳木错.doc' }
              ]
            }

          },
          {
            'inner': {
              'name': '涠洲岛-北海市', // 大标题
              'brief': '这里是国内最蓝的海岛，也是唯一有可能看到鲸鱼的地方，尤其是这个季节，鲸鱼会频繁出现，给人带来无限的期待.',	// 描述
              // 按钮， url改成 "..//download/纳木错.doc为本地文件，改成url是外部链接
              'buttom': [{ 'name': '查看', 'url': '..//download/涠洲岛.pdf', 'target': '_blank' },
              { 'name': '下载', 'url': '..//download/涠洲岛.doc' }
              ]
            }
          },
          {
            'inner': {
              'name': '张家界-湖南', // 大标题
              'brief': '1982年9月，张家界国家森林公园成为中国第一个国家森林公园。1988年8月，张家界武陵源风景名胜区被列入国家重点风景名胜区；.',	// 描述
              // 按钮， url改成 "..//download/纳木错.doc为本地文件，改成url是外部链接
              'buttom': [{ 'name': '查看', 'url': '..//download/张家界.pdf', 'target': '_blank' },
              { 'name': '下载', 'url': '..//download/张家界.doc' }
              ]
            }
          },
          {
            'inner': {
              'name': '冰岛-北欧', // 大标题
              'brief': '冰岛共和国（冰岛语：Lýðveldið Ísland），简称冰岛，是北大西洋中的一个岛国。位于大西洋和北冰洋的交汇处，北欧五国之一，国土面积为10.3万平方千米，人口约为34万，是欧洲人口密度最小的国家。.',	// 描述
              // 按钮， url改成 "..//download/纳木错.doc为本地文件，改成url是外部链接
              'buttom': [{ 'name': '查看', 'url': '..//download/冰岛.pdf', 'target': '_blank' },
              { 'name': '下载', 'url': '..//download/冰岛.doc' }
              ]
            }
          },
        ]
      }
    },
    methods: {
      shuchu() {
        console.log(this.Strategy);
      }

    },
  }).mount('#download')
  //页脚联系方式
  Vue.createApp({
    data() {
      return {
        showModal: false,
        showModalqq: false,
      }
    },
    methods: {
      //页脚qq弹框判断
      qq1(index) {
        this.showModalqq = true;
        this.showModal = false;
      },
      //页脚微信弹框判断
      wx1(index) {
        this.showModal = true;
        this.showModalqq = false;
      },
    }
  }).mount('#lxfs')
</script>
<script type="text/javascript">
  //右上角百度搜索
  var $eleBtn1 = $("#btn");
  $eleBtn1.click(function () {
    var value = document.getElementById("textId").value;
    console.log(value)
    var $eleForm = $("<form method='get' </form>");
    window.open("https://www.baidu.com/s?wd=" + value);
    $(document.body).append($eleForm);
    $eleForm.submit();
  })
</script>

</html>